{#<!DOCTYPE html>#}
{#<html lang="zh-CN">#}
{#<head>#}
{#    <meta charset="UTF-8">#}
{#    <meta name="viewport" content="width=device-width, initial-scale=1.0">#}
{#    <title>登录页面</title>#}
{#    <style>#}
{#        /* 保留原有样式 */#}
{#        * {#}
{#            margin: 0;#}
{#            padding: 0;#}
{#            box-sizing: border-box;#}
{#            font-family: 'Arial', sans-serif;#}
{#        }#}
{##}
{#        body {#}
{#            background-color: #f0f2f5;#}
{#            display: flex;#}
{#            justify-content: center;#}
{#            align-items: center;#}
{#            min-height: 100vh;#}
{#        }#}
{##}
{#        .login-container {#}
{#            background-color: white;#}
{#            padding: 2rem;#}
{#            border-radius: 8px;#}
{#            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);#}
{#            width: 100%;#}
{#            max-width: 350px;#}
{#        }#}
{##}
{#        .login-title {#}
{#            text-align: center;#}
{#            margin-bottom: 1.5rem;#}
{#            color: #1a1a1a;#}
{#            font-size: 1.8rem;#}
{#        }#}
{##}
{#        .form-group {#}
{#            margin-bottom: 1rem;#}
{#        }#}
{##}
{#        label {#}
{#            display: block;#}
{#            margin-bottom: 0.5rem;#}
{#            color: #4a4a4a;#}
{#            font-size: 0.9rem;#}
{#        }#}
{##}
{#        input {#}
{#            width: 100%;#}
{#            padding: 0.8rem;#}
{#            border: 1px solid #ddd;#}
{#            border-radius: 4px;#}
{#            font-size: 1rem;#}
{#        }#}
{##}
{#        input:focus {#}
{#            outline: none;#}
{#            border-color: #007bff;#}
{#            box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);#}
{#        }#}
{##}
{#        .submit-btn {#}
{#            width: 100%;#}
{#            padding: 0.8rem;#}
{#            background-color: #007bff;#}
{#            color: white;#}
{#            border: none;#}
{#            border-radius: 4px;#}
{#            font-size: 1rem;#}
{#            font-weight: 500;#}
{#            cursor: pointer;#}
{#            transition: background-color 0.3s;#}
{#        }#}
{##}
{#        .submit-btn:hover {#}
{#            background-color: #0056b3;#}
{#        }#}
{##}
{#        /* 新增提示信息样式 */#}
{#        .message {#}
{#            margin-top: 1rem;#}
{#            padding: 0.8rem;#}
{#            border-radius: 4px;#}
{#            text-align: center;#}
{#            display: none;#}
{#        }#}
{##}
{#        .success {#}
{#            background-color: #d4edda;#}
{#            color: #155724;#}
{#            display: block;#}
{#        }#}
{##}
{#        .error {#}
{#            background-color: #f8d7da;#}
{#            color: #721c24;#}
{#            display: block;#}
{#        }#}
{#    </style>#}
{#</head>#}
{#<body>#}
{#    <div class="login-container">#}
{#        <h2 class="login-title">用户登录</h2>#}
{#        <!-- 移除form的action和method，通过JS处理提交 -->#}
{#        <form id="loginForm">#}
{#            <div class="form-group">#}
{#                <label for="user">用户名</label>#}
{#                <input type="text" id="user" name="user" required>#}
{#            </div>#}
{#            <div class="form-group">#}
{#                <label for="passwd">密码</label>#}
{#                <input type="password" id="passwd" name="passwd" required>#}
{#            </div>#}
{#            <button type="submit" class="submit-btn">登录</button>#}
{#            <!-- 新增提示信息容器 -->#}
{#            <div id="message" class="message"></div>#}
{#        </form>#}
{#    </div>#}
{##}
{#    <script>#}
{#        // 获取表单和提示元素#}
{#        const form = document.getElementById('loginForm');#}
{#        const messageEl = document.getElementById('message');#}
{##}
{#        // 监听表单提交事件#}
{#        form.addEventListener('submit', async (e) => {#}
{#            e.preventDefault(); // 阻止默认跳转行为#}
{##}
{#            // 获取表单数据#}
{#            const user = document.getElementById('user').value;#}
{#            const passwd = document.getElementById('passwd').value;#}
{##}
{#            try {#}
{#                // 发送POST请求到后端#}
{#                const response = await fetch('/login', {#}
{#                    method: 'POST',#}
{#                    headers: {#}
{#                        'Content-Type': 'application/json', // 明确使用JSON格式#}
{#                    },#}
{#                    body: JSON.stringify({ user, passwd }) // 转换为JSON字符串#}
{#                });#}
{##}
{#                const result = await response.json();#}
{##}
{#                // 显示提示信息#}
{#                messageEl.className = 'message'; // 重置样式#}
{#                if (result.code === 0) {#}
{#                    messageEl.classList.add('success');#}
{#                } else {#}
{#                    messageEl.classList.add('error');#}
{#                }#}
{#                messageEl.textContent = result.message;#}
{##}
{#            } catch (error) {#}
{#                messageEl.className = 'message error';#}
{#                messageEl.textContent = '网络错误，请重试';#}
{#            }#}
{#        });#}
{#    </script>#}
{#</body>#}
{#</html>#}




